<template>
    <div class="">
        <div id="header">
          <div id="logo">
            <img src="https://course.myhope365.com/img/logo-text.321d0dc2.png" alt="">
          </div>
          <div id="header_nav">
            <div id="header_nav1">
                <div id="nav_left">
                    <ul >
                        <li id="nav_index"
                        style="float: left;
                    list-style: none;
                    margin-left: 20px;
                    margin-top: 30px;"><a  href=""
                          style=" text-decoration: none;
                          color: #fff;
                          font-size: 18px;
                          font-weight: bold; ">首页</a></li>
                        <li class="headerdetails" style="float: left;
                    list-style: none;
                    margin-left: 20px;
                    margin-top: 30px;"><a href="" id="header-coursesort"
                          style=" text-decoration: none;
                          color: #fff;
                          font-size: 18px;
                          font-weight: bold;"   
                          @mouseenter="toggleList(true)" @mouseleave="toggleList(false)">课程分类 ⌵</a>  
                          <div id="courseDetail" v-show="isShow"  @mouseenter="toggleList(true)" @mouseleave="toggleList(false)">
                             <ul style="padding:0;">
                                 <li id="detail" v-for="item in courseDetail" :key="item.subjectId" 
                                  >
                                      <a href=""> {{ item.title }}</a>
                                </li>
                             </ul>
                          </div>                                      
                        </li>
                        <li id="nav-plat" style="float: left;
                    list-style: none;
                    margin-left: 20px;
                    margin-top: 30px;"><a href="https://stu.myhope365.com/home"
                          style=" text-decoration: none;
                          color: #fff;
                          font-size: 18px;
                          font-weight: bold;
                         ">教学管理云平台</a></li>
                    </ul>
                </div>
                <div id="search">
                    <input type="text" placeholder="   搜索课程~" 
                    v-model="searchKeyword"
                        @keyup.enter="handleSearch">
                    <button id="search-button" @click="handleSearch">
                        <img src="" alt="">
                    </button> 
                </div>
                 <div id="login">
                    <span><img @click="ToCart" src="" alt=""> </span>
                    <LoginView />

                </div>
            </div>
          </div>
        </div>



    </div>
</template>

<script>
import { getDetail} from "@/api/request";
import LoginView from "@/components/loginView.vue";

export default {
    name:'HeaderView',
       data() {
        return {
            isShow: false ,
            courseDetail: [],
            searchKeyword: ''
        }
    },
    components: {
        LoginView, 
    },
    created() {
    getDetail({"enable": "1"}).then(res => {
      console.log(res.data,"课程详情");
      this.courseDetail = res.rows
    }) 
  },
  methods: {
    ToCart(){
      this.$router.push({ path: '/cart' }); 
    },
    toggleList(visible) {
      this.isShow = visible;
    },
    handleSearch() {
    const keyword = this.searchKeyword.trim();
    const route = this.$router.resolve({
        path: '/search',
        query: { keyword }
    });
    window.open(route.href, '_blank');
}
  }
}
</script>

<style lang="scss" scoped>

#header {
width: 100%;
height: 300px;
background: no-repeat url("https://course.myhope365.com/img/index-top-bg.564836d0.png");
background-size: 100% 100%;

#logo {
    height: 168px;
    display: flex;
    justify-content: center;
    align-items: center;

    img {
        margin: auto;
        width: 212px;
    }
}

#header_nav {
    height: 80px;

    #header_nav1 {
        display: flex;
        width: 1160px;
        height: 80px;
        margin: auto;

        #nav_left {
            height: 100%;

        }
        #search {
            display: flex;
            margin-top: 20px;
            margin-left: 300px;

            input {
                width: 270px;
                height: 40px;
                border-radius: 15px 0 0 15px;
                border: none;
                outline: none;

            }

            button {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 40px;
                height: 40px;
                border-radius: 0 15px 15px 0;
                border: 1px solid #fff;
                background-color: transparent;
            }
        }
    }
}
}
#login {
display: flex;
justify-content: center;
align-items: center;
margin-left: 20px;

span {
    background-color: #fff;
    border-radius: 50px;
    width: 36px;
    height: 36px;
    margin-right: 15px;

    img {
        margin: 8px;
    }
}
#show-login-btn {
        width: 100px;
        height: 30px;
        background-color: #fff;
        margin-left: 20px;
        padding-left: 10px;
        border-radius: 15px;
        text-decoration: none;
            color: #5dcddc;
            font-size: 16px;
            font-weight: bold;
            line-height: 30px;
            text-align: center;
            display: block;
        
    }
}
#nav_index {
margin-left: 20px; 
}
.headerdetails{
  position: relative;
  
 }
 #courseDetail {
  position: absolute;
  background-color: white;
  width: 140px;
  border: 1px solid #e1e4e6; 
  z-index: 999;
  margin-left: -20px;
  padding: 5px 0; 
}

#detail {
  list-style: none;
  cursor: pointer;
  height: 36px;
  width: 100%;
  
  a {
    display: block; 
    padding: 5px 10px; 
    text-align: left; 
    line-height: 20px;
    font-size: 14px;
    text-decoration: none;
    color: #555;
  }
}

#detail:hover {
  background-color: #def1e6;
}
.search-input::placeholder {
  padding-left: 16px; 
}

</style>